<template>
  <n-card :bordered="false">
    <n-alert :show-icon="false" class="m-b-10">
      <n-form :model="searchParam" class="search-forms"
              inline
              :show-feedback="false"
              label-placement="left"
              @keydown.enter.prevent="handleSubmitSearch">
        <n-form-item>
          <n-input v-model:value="searchParam.key" placeholder="输入订单号/用户名称/用户电话查询" style="width: 290px;"
                   clearable/>
        </n-form-item>
        <n-form-item>
          <search-button-group @submit="handleSubmitSearch"
                               @reset="()=>(searchParam.key=null)"/>
        </n-form-item>
      </n-form>
    </n-alert>
    <!--核销记录列表-->
    <data-table ref="data_list"
                  :columns="columns"
                  :row-key="(row:Recordable) => row.id"
                  :params="searchParam"
                  list-url="order/write_order_list">

    </data-table>
  </n-card>
</template>
<script setup lang="ts">
import {ref, h} from 'vue';
import SearchButtonGroup from '@components/SearchButtonGroup';
import DataTable from '@components/DataTable';
import {NEllipsis, NImage} from 'naive-ui';
import {Config} from "@/config";

const searchParam = ref({
  key: null,
})
//数据列表
const data_list = ref<any>();
const columns = ref([
  {
    type: 'expand',
    renderExpand: (row:{child:{classHour:number,createTime:string,price:number,tname:string}[]}) => {
      const children:any=[];
      for (let i=0;i<row.child.length;i++){
       const item:any=h('div',{
         style:{
           display:'flex',
           padding:'5px 40px'
         }
       },{
          default: () => (
              [
                  h('div',{
                    style:{
                      width:'358px',
                    }
                  },{default: () => ('核销教师:'+row.child[i]['tname'])}),
                  h('div',{
                    style:{
                      width:'130px',
                    }
                  },{default: () => ('核销课时:'+row.child[i]['classHour'])+'小时'}),
                  h('div',{
                    style:{
                      width:'150px',
                    }
                  },{default: () => ('金额:'+row.child[i]['price'].toFixed(2))}),
                  h('div',null,{default: () => ('核销时间:'+row.child[i]['createTime'])}),
              ]
          )
        });
        children.push(item);
      }
      return h('div',null,{ default: () => (children)})
    }
  },
  {
    title: '订单号',
    key: 'sn',
    width:210,
  }, {
    title: '用户信息',
    key: 'userName',
    width: 150,
    render(row: { userName: string, phone: string }) {
      return h('div', {style: {width: '100%'}}, {
        default: () => (
            [h(NEllipsis, {style: {display: 'block'}}, {default: () => (row.userName)}),
              h('div', null, {default: () => (row.phone)})
            ])
      })
    }
  }, {
    title: '课程信息',
    key: 'course',
    width: 130,
    render(row: { courseName: string, catName: string, gradeName: string }) {
      return h('div', {style: {width: '100%'}}, {
        default: () => (
            [h(NEllipsis, {style: {display: 'block'}}, {default: () => (row.courseName)}),
              h('div', null, {default: () => (row.catName + '/' + row.gradeName)})
            ])
      })
    }
  }, {
    title: '地址',
    key: 'address',
    render(row: { provinceName: string, cityName: string, countyName: string, address: string, house: string }) {
      const fullAddress: string = row.provinceName + row.cityName + row.countyName + row.address + row.house;
      return h('span', null, {default: () => (fullAddress)})
    }
  }, {
    title: '总课时(小时)',
    key: 'totalTime',
    width: 110,
    align: 'center',
    render(row: { totalTime: string | number }) {
      const timeText = row.totalTime + '小时';
      return h('span', null, {default: () => (timeText)})
    }
  }, {
    title: '教师性别',
    key: 'tsexName',
    width: 100,
    align: 'center',
  }, {
    title: '课酬',
    key: 'price',
    width: 100,
    render(row: { price: string }) {
      const priceText = row.price + '元/小时';
      return h('span', null, {default: () => (priceText)})
    }
  }, {
    title: '用户微信',
    key: 'wechat',
    width: 120,
    render(row: { nickname: string, avatar: string  }) {
      return h('div', {style: {width: '100%', display: 'flex'}}, {
        default: () => (
            [
              h(NImage, {width: 30, height: 30, src: Config.VIEW_FILE + row.avatar}),
              h(NEllipsis, {style: {display: 'block', paddingLeft: '5px'}}, {default: () => (row.nickname)})
            ])
      })
    }
  }, {
    title: '创建时间',
    key: 'createTime',
    width: 175,
  }
]);


//查询
const handleSubmitSearch = () => {
  data_list.value.searchListData();
}

</script>

<style scoped lang="scss">

</style>